<template>
	<view class="cloud-image">
		<view class="cloud-image__content">
			<view class="flex justify-between">
				<text class="text-black">{{title}}</text>
				<text class="text-sm margin-left-sm text-gray">{{tips}}</text>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view_H2">
					<view v-for="(item, index) in srcList" :key="index" 
						class="scroll-view-item_H"
						draggable="true" 
						@dragstart="onDragStart(index)" 
						@dragend="onDragEnd(index)">
						
						<image :src="item" mode="aspectFill" class="image" :style="imageSizeStyle"></image>
						<uni-icons v-if="!disabled" class="image-delete" type="trash" size="20" color="#ff0000"
							@click="del(index)">
						</uni-icons>
					</view>
					<uni-icons v-if="isShowIcon" class="scroll-view-item_H content-image-icon" :type="suffixIcon"
						:size="iconSize" color="#c0c4cc" @click="upload()"></uni-icons>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'cloud-image-alioss',
		data() {
			return {
				val: "",
				srcList: [],
				draggingIndex: null
			};
		},
		methods: {
			onDragStart(index) {
				this.draggingIndex = index;
			},
			onDragEnd(index) {
				if (this.draggingIndex !== null && this.draggingIndex !== index) {
					this.swapItems(this.draggingIndex, index);
				}
				this.draggingIndex = null;
			},
			swapItems(fromIndex, toIndex) {
				const temp = this.srcList[fromIndex];
				this.srcList.splice(fromIndex, 1);
				this.srcList.splice(toIndex, 0, temp);
				this.$emit('input', this.srcList);  // 更新图片数组
			},
			del(index) {
				this.srcList.splice(index, 1);
				this.$emit('input', this.srcList);
			},
			upload() {
				// 上传图片逻辑
			}
		}
	};
</script>
